<template lang='pug'>
.svgCircle3(:style="stylesvg")
    svg(:width="w" :height="h" style="transform: rotate(-90deg)")
        template(v-for="itm,idx in vals")
            circle( :cx="w/2" :cy="h/2" :r="getRadius(idx)"
                fill="none" stroke-width="5" :stroke="bkColor" )
            circle(:class="'progress_svg_circle_'+(idx)" :cx="w/2" :cy="h/2" :r="getRadius(idx)"
                fill="none" stroke-width="5" :stroke="colors[idx]"
                :stroke-dasharray="getDashLength(idx)" :stroke-dashoffset="getDashLength(idx)")
    .svgtxt(:style="styletxt") {{total}}
</template>
<script>
export default {
    props:{
        bkColor:{default:'rgba(125,125,125,0.5)'},
        color:{default:'rgb(255, 234, 152)'},
        w:{default:120},
        h:{default:120},
        colors:{default:['rgb(237, 184, 10)','rgb(0, 178, 254)','rgb(0, 235, 135)']},
        vals:{default:[0.9,0.8,0.7]},
        total:{default:200}
    },
    mounted(){
        var sheet = document.styleSheets[0]
        for(let i=0;i<3;i++){
            let keyframe_rule=`
              @keyframes circleProgress${i} {
                100%{
                stroke-dashoffset:${(1-this.vals[i]) * this.getDashLength(i)};
                }
            }`
            sheet.insertRule(keyframe_rule, 0)
            sheet.addRule('.progress_svg_circle_'+i, `animation:circleProgress${i} 1s forwards`)
            // let doc=document.getElementsByClassName('progress_svg_circle_'+i)
            // doc.style.animation=`circleProgress${i} 1s forwards`
        }
        
    },
    computed:{
        stylesvg(){
            return {
                width:this.w+'px',
                height:this.h+'px',
                background:this.bkColor
            }
        },
        styletxt(){
            return {
                width:this.w+'px',
            }
        },
    },
    methods:{
        getRadius(idx){
            return idx*10+30
        },
        getDashLength(idx){
            return 3.14*2*this.getRadius(idx)
        }
    }
}
</script>
<style lang="scss" scoped>
.svgCircle3{
    position: relative;
}
.svgtxt{
    position:absolute;
    font-size: 28px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 100%;
    top: 42px;
}

</style>